<template>
	<view class="home-container flex-column">
		<view class="home-content">
			<customTabBar :selected="current" @changeHomeCurrent="changeHomeCurrent" />
			<swiper class="home-swiper" :current="current" :circular="true" @change="handleHomeSwiperChange">
				<swiper-item>
					<talentView />
				</swiper-item>
				<swiper-item>
					<employerView />
				</swiper-item>
				<swiper-item>
					<partnerView />
				</swiper-item>
				<swiper-item>
					<recommendationView />
				</swiper-item>
				<swiper-item>
					<attentionView />
				</swiper-item>
			</swiper>
		</view>
		<view class="home-bottom-tab-bar">
			<tarBarView :selected="0" v-show="is_show_tab_bar" />
		</view>
		<view class="home-footer">
			<popupItem />
		</view>
	</view>
</template>

<script>
	import customTabBar from "../../components/home/custom-tab-bar/custom-tab-bar.vue"
	import talentView from "../home/talentView/talentView.vue"
	import employerView from "../home/employerView/employerView.vue"
	import partnerView from "../home/partnerView/partnerView.vue"
	import recommendationView from "../home/recommendationView/recommendationView.vue"
	import attentionView from "../home/attentionView/attentionView.vue"
	import tarBarView from "../../components/custom-tab-bar/index.vue"
	import popupItem from "../../components/home/popupItem/popupItem.vue"
	export default {
		components: {
			customTabBar,
			talentView,
			employerView,
			partnerView,
			recommendationView,
			attentionView,
			tarBarView,
			popupItem
		},
		data() {
			return {
				current: 3,
				is_show_tab_bar: true,
				dataList: []
			}
		},
		mounted() {
			this.$bus.$on('changeShowTabBar', this.changeShowTabBar)
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {

			// 滑块index改变时触发事件
			handleHomeSwiperChange(e) {
				this.current = e.detail.current
				let videoContextArr = this.$store.state.videoContextArr
				videoContextArr.forEach(item => {
					if (Math.abs(this.current - 3) >= 2) {
						item.seek(0)
					}
					item.pause()
				})
				if (this.current == 3) {
					this.$store.state.currentVideoContext.play()
				}
			},
			// customTabBar 改变滑块index
			changeHomeCurrent(data) {
				this.current = data
			},
			// 
			changeShowTabBar(data) {
				this.is_show_tab_bar = data
			}
		}
	}
</script>

<style lang="scss">
	.home-container {
		height: 100%;
		background-color: #000;
		color: #fff;

		.home-content {
			width: 100%;
			flex-grow: 1;

			.home-swiper {
				position: absolute;
				bottom: 120rpx;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.home-bottom-tab-bar {
			flex-grow: 0;
		}

		.home-footer {}
	}
</style>